<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper" :autoplay="autoplay" :circular="circular">
			<swiper-item v-for="(item, index) in bannerData" :key="index">
				<view class="swiper-item" @click="clickBannerItem(item)">
					<image :src="item.imgUrl" mode="aspectFill" :draggable="false" />
				</view>
			</swiper-item>
		</swiper>

		<!-- 宫格组件 -->
		<view class="grid-body">
			<view class="grid-title"><text>工作台</text></view>
			<uni-grid :column="4" :showBorder="false" >
				<uni-grid-item v-for="(item,index) in workList" :index="index" :key="index" class="gridView">
					<view class="grid-item-box" @click="clickGridItem(item)">
						<view class="imgView" :style="item.bgStyle"><image :src="item.imgUrl"></image></view>
						<text class="text">{{item.text}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" type="left" style="height: 170px;">
				<view class="popupContent">
					<view class="userView" @click="toUserInfo">
						<image src="/static/images/user3.png" mode=""></image>
						<text>个人资料</text>
					</view>
					<view class="userView"  @click="toBindStudent">
						<image src="/static/images/idcard.png" mode=""></image>
						<text>绑定学生</text>
					</view>
					<view class="userView"  @click="toSwitchStudent">
						<image src="/static/images/switch.png" mode=""></image>
						<text>切换学生</text>
					</view>
					<view class="userView"  @click="toLogout">
						<image src="/static/images/logouut.png" mode=""></image>
						<text>退出账号</text>
					</view>
				</view>
			</uni-popup>
		</view>
		<show-modal></show-modal>
	</view>
</template>

<script>
	import { logout  } from '@/api/login'
	import { getBannerPage,getAdminBanner } from '@/api/system/system.js'
	export default {
		data() {
			return {
				current: 0,
				swiperDotIndex: 0,
				autoplay: true,
				circular:true,
				leftOpen:false,
				userType:uni.getStorageSync('userType'),
				pageForm:{
					pageNo:1,
					pageSize:10
					
				},
				bannerData: [{
						image: '/static/images/banner/banner01.jpg'
					},
					{
						image: '/static/images/banner/banner02.jpg'
					},
					{
						image: '/static/images/banner/banner03.jpg'
					}
				],
			workList:[]
				
			}
		},
		created() {
			
			if(this.userType == 2){
				this.getBanner()
				this.workList=[

				{
					naviUrl: '/pages/course/index',
					imgUrl:'/static/images/teach.png',
					text:'课程学习',
					bgStyle:'background: #508CFF'
				},
				{
					naviUrl: '/pages/exam/activity?type=1',
					imgUrl:'/static/images/exam.png',
					text:'模拟考试',
					bgStyle:'background: #FF9A50'
				},
				{
					naviUrl: '/pages/exam/activity?type=0',
					imgUrl:'/static/images/exam2.png',
					text:'正式考试',
					bgStyle:'background: #F26D6D'
				},
				{
					naviUrl: '/pages/study/index',
					imgUrl:'/static/images/user2.png',
					text:'我的学习',
					bgStyle:'background: #508CFF'
				}
			]
			}else if(this.userType ==1){
				this.adminBanner()
				this.workList=[
				{
					naviUrl: '/pages/work/datacenter/activityList',
					imgUrl:'/static/images/datacenter.png',
					text:'数据中心',
					bgStyle:'background: #50B987'
				},
				
				{
					naviUrl: '/pages/system/index',
					imgUrl:'/static/images/system.png',
					text:'系统管理',
					bgStyle:'background: #508CFF'
				},
				{
					naviUrl: '/pages/school/index',
					imgUrl:'/static/images/school.png',
					text:'学校管理',
					bgStyle:'background: #508CFF'
				},
				{
					naviUrl: '/pages/work/teach/index',
					imgUrl:'/static/images/teach.png',
					text:'教学管理',
					bgStyle:'background: #9B82FF'
				},
				
				{
					naviUrl: '/pages/work/exam/index',//
					imgUrl:'/static/images/exam.png',
					text:'考试管理',
					bgStyle:'background: #508CFF'
				},

			]
			}
		},
		methods: {
			getBanner(){
				getBannerPage().then(res =>{
					this.bannerData = res.data.list
				})
				
			},
			adminBanner(){
				getAdminBanner(this.pageForm).then(res =>{
					this.bannerData = res.data.list
				})
			},
			clickBannerItem(item) {
				uni.navigateTo({
					url: '/pages/common/webview?url=' + item.url
				})
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			clickGridItem(e) {
				if(this.userType ==2){
					let studentId = uni.getStorageSync('studentId')
					if(studentId == null || studentId == ''){
						let that = this
						this.$showModal({
							title: '',
							icon:'/static/images/noStudent.png',
							content: '您需要先绑定学生身份方可参加考试',
							confirmText:"去绑定",
							message:true,
							success(res) {
								if (res.confirm) {
									that.$tab.navigateTo('/pages/mine/student/bindStudent')
								}			
							}
						})
					}else{
						this.$tab.navigateTo(e.naviUrl)
					}
				}else if(this.userType == 1){
					if(e.naviUrl == ''){
						 this.$modal.msgError("该模块正在开发中")
					}else{
						this.$tab.navigateTo(e.naviUrl)
					}
					
				}
				
				
			},
			onNavigationBarButtonTap(e) {
				this.leftOpen = !this.leftOpen
				if(this.leftOpen){
					this.$refs.popup.open('left')
				}else{
					this.$refs.popup.close()
				}
				
			},

			toBindStudent(){
				this.$tab.navigateTo('/pages/mine/student/bindStudent')
			},
			toSwitchStudent(){
				this.$tab.navigateTo('/pages/mine/student/switchStudent')
			},
			toLogout() {
				let that = this
				this.$showModal({
					title: '',
					icon:'/static/images/warning.png',
					content: '确定退出系统吗？',
					cancelText:"取消",
					confirmText:"确定",
					message:false,
					success(res) {
						if (res.confirm) {
								that.$store.dispatch('LogOut').then(() => {
								that.$tab.reLaunch('/pages/login')
							})
						}		
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		min-height: 100%;
		height: auto;
		width: calc(100vw - 60rpx);
		margin: 0 auto;
	}

	view {
		font-size: 14px;
		line-height: inherit;
	}

	/* #endif */
	
	 /deep/ .uni-btn-icon {
		margin-left: 20px;
	}
	.work-container{
		width: calc(100vw - 60rpx);
		margin: 0 auto;
	}
	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	//轮播图
	.swiper-box{
		margin: 34rpx auto;
	}
	.grid-body{
		background-color: #fff;
		box-shadow: 0rpx 4rpx 60rpx 10rpx rgba(156,193,220,0.25);
		border-radius: 20rpx;
		.grid-title{
			padding: 28rpx 34rpx;
			text{
				font-size: 32rpx;
				font-weight: bold;
				line-height: 32rpx;
			}
		}
		.gridView {
			margin-bottom: 30rpx;
			.grid-item-box {
					flex: 1;
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.imgView{
						width: 60px;
						height: 60px;
						box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);
						border-radius: 20rpx;
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: column;
						align-items: center;
						justify-content: center;
						uni-image{
							width: 30px;
							height: 30px;
						}
					}
					.text{
						font-family: Inter-Thin, Inter;
						color: #5E5E5E;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
		
	

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 150px;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;

		image {
			border-radius: 20rpx;
		}
	}
	.popupContent{
		width: 132px;
		height: 171px;
		background: #7E8592;
		border-radius: 5px 5px 5px 5px;
		color: #fff;
		margin: 10px;
		.userView{
			display: flex;
			padding: 22rpx 50rpx;
			image{
				width: 17px;
				height: 17px;
				margin-right: 10rpx;
			}
		}
	}
	@media screen and (min-width: 500px) {
		.uni-swiper-dot-box {
			width: 400px;
			/* #ifndef APP-NVUE */
			margin: 0 auto;
			/* #endif */
			margin-top: 8px;
		}

		.image {
			width: 100%;
		}
	}
</style>
